<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>财合税后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="${path}/css/font.css">
    <link rel="stylesheet" href="${path}/css/xadmin.css">
    <link rel="stylesheet" href="${path}/js/imgUp/css/common.css">
    <link rel="stylesheet" href="${path}/js/imgUp/css/index.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="${path}/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${path}/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
      <style>
          .staleConSelBox {
              position: relative;
              min-width: 190px;
              height: 36px;
              float: left;
              cursor: pointer;
              border: 1px solid #d2d2d2;
              border-radius: 0 2px 2px 0;
              background: #fff;
          }
          .staleConSelText {
              display: block;
              background: url("images/arrow.png") no-repeat 167px center;
              padding-right: 20px;
              line-height: 36px;
              padding-left: 10px;
          }
          .staleConSelUl {
              position: absolute;
              top:37px;
              left: 0px;
              border: 1px solid #eeeeee;
              background-color: #ffffff;
              display: none;
              z-index: 2;
              width: 100%;
          }
          .staleConSelUl li {
              position: relative;
              height: 36px;
              line-height: 36px;
              cursor: pointer;
              padding: 0 5px;
              color: #333;
          }
          .staleConSelUl li ul{
              width: 100%;
              left: 100%;
              top: 0;
              position: absolute;
              background: #fff;
              display: none;
              border: 1px solid #eee;
          }
      </style>
  </head>
  
  <body>
    <div class="x-body">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>系列名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>课程分类
                </label>
                <div class="layui-input-inline">
                    <div class="staleConSelBox">
                        <span class="staleConSelText">课程类型<i class="layui-edge"></i></span>
                        <ul class="staleConSelUl">
                            <li class="one">财务</li>
                            <li class="one special">汇算
                                <ul class="inUl">
                                    <li class="two">汇算2级01</li>
                                    <li class="two">汇算2级02</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>所属行业
                </label>
                <div class="layui-input-inline">
                    <div class="staleConSelBox">
                        <span class="staleConSelText">行业<i class="layui-edge"></i></span>
                        <ul class="staleConSelUl">
                            <li class="one">金融</li>
                            <li class="one">教育</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>市场价
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>原价
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>会员价
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    关键词
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="username" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                    <span>（逗号分隔）</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>课程图片
                </label>
                <div class="layui-input-inline">
                    <div class="img-box full" style="width: 800px;min-width: 800px;float: left;margin-top: 0">
                        <section class=" img-section">
                            <div class="z_photo upimg-div clear" >
                                <section class="z_file fl">
                                    <img src="${path}/js/imgUp/img/a11.png" class="add-img">
                                    <input type="file" name="file" id="file" class="file" value="" accept="image/jpg,image/jpeg,image/png,image/bmp" multiple />
                                </section>
                            </div>
                        </section>
                    </div>
                    <aside class="mask works-mask">
                        <div class="mask-content">
                            <p class="del-p">您确定要删除作品图片吗？</p>
                            <p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
                        </div>
                    </aside>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">
                    <span class="x-red">*</span>课程简介<br>
                </label>
                <div class="layui-input-block" style="width: 800px;float: left;margin-left: 0">
                    <textarea class="layui-textarea" id="LAY_demo1" style="display: none"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label  class="layui-form-label">
                </label>
                <button  class="layui-btn" lay-filter="add" lay-submit="">
                    提交
                </button>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="${path}/js/imgUp/js/imgup.js"></script>
    <script>
        layui.use('layedit', function(){
            var layedit = layui.layedit
                    ,$ = layui.jquery;

            //构建一个默认的编辑器
            var index = layedit.build('LAY_demo1');

            //编辑器外部操作
            var active = {
                content: function(){
                    alert(layedit.getContent(index)); //获取编辑器内容
                }
                ,text: function(){
                    alert(layedit.getText(index)); //获取编辑器纯文本内容
                }
                ,selection: function(){
                    alert(layedit.getSelection(index));
                }
            };

            $('.site-demo-layedit').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //自定义工具栏
            layedit.build('LAY_demo1', {
                tool: [ 'strong','italic','underline','strikeThrough','|','face', 'link','image', 'unlink', '|', 'left', 'center', 'right']
                ,height: 100
            })
        });
    </script>
    <script>
        layui.use(['form','layer','upload'], function(){
            $ = layui.jquery;
          var form = layui.form,
            upload = layui.upload,
            layer = layui.layer;
   
		  //执行实例
		  upload.render({
			  elem: '.test'
			  ,done: function(res, index, upload){
			    //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增
			    var item = this.item;
			  }
			})

          /*var appServer = "";
            $("#file" ).takungaeImgup({
                formData: {
                    "path": "artScene/",
                    "name": "eee"
                },
                url: appServer + "/ajax/uploadPic.htm",
                success: function(data) {},
                error: function(err) {
                    alert(err);
                }
            });*/

            function addComm(){
                jQuery.ajax({
                    url: "/addComment.action",
                    type: 'POST',
                    data: {'imageUrls': imgUrls},
                    dataType: 'json',
                    success: function (data) {
                        alert("发布成功");
                    }
                })
            }
        
          //自定义验证规则
          form.verify({
            nikename: function(value){
              if(value.length < 5){
                return '昵称至少得5个字符啊';
              }
            }
            ,pass: [/(.+){6,12}$/, '密码必须6到12位']
            ,repass: function(value){
                if($('#L_pass').val()!=$('#L_repass').val()){
                    return '两次密码不一致';
                }
            }
          });     

          //监听提交
          form.on('submit(add)', function(data){
            console.log(data);
            //发异步，把数据提交给php
            layer.alert("增加成功", {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            return false;
          });

            layui.use('laydate', function(){
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#start', //指定元素
                    type: 'datetime'//年 月 日 时 分 秒

                });
            });
        });
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
    <script>
        $(function(){
            function stopPropagation(e) {
                var ev = e || window.event;
                if (ev.stopPropagation) {
                    ev.stopPropagation();
                }
                else if (window.event) {
                    window.event.cancelBubble = true;//兼容IE
                }
            }

            $(".staleConSelBox").click(function (e) {
                $(".staleConSelUl").hide();
                $(this).children(".staleConSelUl").show();
                stopPropagation(e);
            });
            $(document).bind('click', function () {
                $(".staleConSelUl").hide();
            });
            $(".staleConSelUl .one").hover(function () {
                $(this).css({backgroundColor: "#5FB878", color: "#ffffff"})
                $(".staleConSelUl .two").css("color","#333");
                $(this).find("ul").show();
            }, function () {
                $(this).css({backgroundColor: "#fff", color: "#333"})
                $(this).find("ul").hide();
            });
            $(".staleConSelUl .two").hover(function () {
                $(this).css({backgroundColor: "#5FB878", color: "#ffffff"})
            }, function () {
                $(this).css({backgroundColor: "#fff", color: "#333"})
            });
            $(".staleConSelUl .one").click(function (e) {
                $(this).parents(".staleConSelUl").siblings(".staleConSelText").html($(this).html());
                $(this).parents(".staleConSelUl").hide();
                $(".inUl").hide();
                stopPropagation(e);
            })
            $(".staleConSelUl .two").click(function (e) {
                var motherHtml = $(this).parents(".one").html();
                $(this).parents(".staleConSelUl").siblings(".staleConSelText").html(motherHtml+">"+$(this).html());
                $(this).parents(".staleConSelUl").hide();
                $(".inUl").hide();
                stopPropagation(e);
            })
        })
    </script>
  </body>

</html>